<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
     <style>
         button{

         }
         p {

             font-size: 18px;
         }
     </style>
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>

 <p>Hi Jquery</p>

 <p>Please show us some tricks you can do</p>



 <p class="magicElement">Magic Here</p>
 <button id="btnShowMagic">Click to See Magic</button>


<script type="text/javascript" >
$(function (){


    //$('p') -- object1
  //1milli - 3 milli seconds -- 30-60 milli seconds
    // 100milli --
    //$('p')--
     //--object1

    $('#btnShowMagic').click(function (){
        $('p').css('color','red');
        $('p').hide(2000,function(){
            console.log('element is hidden');
        });//--object1
        $('p').show(3000);
    });
//

   // $('p').css('color','red').hide().show();//chaining
    //chaining is much faster than doing in multiple lines

   // $('.magicElement')// cross browser
    //
    //array
   // document.getElementsByTagName('p');//[]

});

</script>
</body>
</html>